import "package:flutter/material.dart";

class CustomScrollViewPage extends StatelessWidget {
  const CustomScrollViewPage({super.key});
  @override
  Widget build(BuildContext context) {
    // SliverFixedExtentList 是一个 Sliver，它可以生成高度相同的列表项。
    // 再次提醒，如果列表项高度相同，我们应该优先使用SliverFixedExtentList
    // 和 SliverPrototypeExtentList，如果不同，使用 SliverList.
    var sliverList = SliverList(
      delegate: SliverChildBuilderDelegate((_, index) {
        return ListTile(
          title: Text("$index"),
        );
      }, childCount: 10),
    );
    // var sliverList = SliverFixedExtentList(
    //     delegate: SliverChildBuilderDelegate((_, index) {
    //       return ListTile(
    //         title: Text("$index"),
    //       );
    //     }, childCount: 10),
    //     itemExtent: 56);
    return Scaffold(
      appBar: AppBar(
        title: const Text('CustomScrollViewPage'),
      ),
      // CustomScrollView 的主要功能是提供一个公共的 Scrollable 和 Viewport，来组合多个 Sliver，
      body: CustomScrollView(
        // CustomScrollView的子组件必须都是Sliver。
        // slivers: [sliverList, sliverList],

        slivers: [
          SliverAppBar(
            pinned: true, // 滑动到顶端时会固定住
            expandedHeight: 250.0, //最大高度
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Demo'),
              background: Image.asset(
                "./images/1.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid(
              //Grid
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  //创建子widget
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                //创建列表项
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue[100 * (index % 9)],
                  child: Text('list item $index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],

        // 如果 CustomScrollView 有孩子也是一个完整的可滚动组件且它们的滑动方向一致，则 CustomScrollView 不能正常工作。
        //要解决这个问题，可以使用 NestedScrollView
        // slivers: [
        //   SliverToBoxAdapter(
        //     child: SizedBox(
        //       height: 300,
        //       child: PageView(
        //         children: const [Text("1"), Text("2")],
        //       ),
        //     ),
        //   ),
        //   sliverList,
        //   sliverList,
        // ],
      ),
    );
  }
}
